<script setup>
import Header from '@/layouts/frontend/components/Header.vue'
import Footer from '@/layouts/frontend/components/Footer.vue'
import UserInfoCard from '@/components/frontend/UserInfoCard.vue'
import TagListCard from "@/components/frontend/TagListCard.vue";
import CategoryListCard from "@/components/frontend/CategoryListCard.vue";
</script>

<template>
  <Header></Header>

  <!-- 主内容区域 -->
  <main class="container max-w-screen-xl mx-auto p-4 px-6">
    <!-- grid 表格布局，分为 4 列 -->
    <div class="grid grid-cols-4 gap-7">
      <!-- 左边栏，占用 3 列 -->
      <div class="col-span-4 md:col-span-3 mb-3">
        <!-- 分类列表 -->
        <CategoryListCard></CategoryListCard>
      </div>

      <!-- 右边侧边栏，占用一列 -->
      <aside class="col-span-4 md:col-span-1">
        <!-- 博主信息 -->
        <UserInfoCard></UserInfoCard>

        <!-- 标签 -->
        <TagListCard></TagListCard>
      </aside>
    </div>

  </main>

  <Footer></Footer>
</template>

<style scoped>

</style>